<template>
	<view>
		<view class="navbar" :style="{height: navbarHeight}"></view>
		<scroll-view class="scroll-y" 
			:style="{height: scrollHeight}" 
			scroll-y
			:scroll-top="scrollTop"
			@scroll="scroll">
			<view class="scroll-content">	
				<view class="interact">
					<view class="ask">
						<image class="head" src="../../static/img/icon.png" mode=""></image>
						<view class="ask-box">
							<view class="title">欢迎来到《职业性格测一测》，请认真回答以下问题</view>
						</view>
					</view>
					<view class="answer">
						<text>好的</text>
						<image class="head" src="../../static/img/head.jpg" mode=""></image>
					</view>
				</view>
				
				<view class="interact" v-for="(item, index) in list" :key="index">
					<view class="rate">{{index + 1}}/{{info.question.length}}</view>
					<view class="ask">
						<image class="head" src="../../static/img/icon.png" mode=""></image>
						<view class="ask-box">
							<view class="title">{{item.title}}</view>
							<view class="list" v-if="item.videoGameAnswerList">
								<view class="ask-card" 
									v-for="(i, index) in item.videoGameAnswerList" 
									:key="i.id"
									@click="selectFilter(i, item)">
									{{i.answerContent}}
								</view>
							</view>
						</view>
					</view>
					<view class="answer" v-if="item.answer">
						<text>{{item.answer}}</text>
						<image class="head" src="../../static/img/head.jpg" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	const debounce = (func, delay = 200) => {
	  let timeout = null
	  return function () {
	    clearTimeout(timeout)
	    timeout = setTimeout(() => {
	      func.apply(this, arguments)
	    }, delay)
	  }
	}
	export default {
		props: ['data'],
		data() {
			return {
				scrollTop: 0,
				oldScrollTop:0,
				
				info: {},
				list: [],
				
				current: 0, // 第一问
				
				// 结果
				result: 0
			}
		},
		methods: {
			scroll (e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			scrollBottom() { // 滚动到底部
				this.scrollTop = this.oldScrollTop
				
				this.$nextTick(() => {
					this.scrollTop = 9999
				})
			},
			
			startAnswer() { // 同步问答
				const question = this.info.question[this.current]
				question.answer = null // 选择的回答内容
				question.isUse = false // 是否已经选择过
				setTimeout(() => {
					this.list.push(question)
					this.scrollBottom()
				}, 400)
			},
			
			selectFilter(item, que) {
				debounce(this.select(item, que), 1000)
			},
			
			select(item, que) { // item 选择的回答  que 正在回答的问题
			  const question = this.info.question
			
				console.log(item, que)
				// 1. 防止重复点击
				if (que.isUse) return
				que.isUse = true
				
				// 2. 得出结果
				if (que.effective === 1) { 
				  const gameInfo = getApp().globalData.gameInfo
					gameInfo.videoGameResult = {...gameInfo.videoGameResult, ...item}
				}
				
				// 3. 根据回答进行的操作
				que.answer = item.answerContent
				if (this.current < question.length - 1) {
					this.current = this.current + 1
				} else {
					this.$emit("complete")
				}
			}
		},
		mounted() {
			this.info = this.data.gameContent
			this.startAnswer()
		},
		watch: {
			current(val) {
				this.startAnswer()
				this.scrollBottom()
			}
		},
		computed: {
			navbarHeight() {
				const app = getApp().globalData
				return `${app.barHeight + 40}px`
			},
			scrollHeight() {
				return `calc(100vh - ${this.navbarHeight})`
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes dynamic {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}
		50% {
			opacity: .6;
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	@keyframes scaleAnimation{
		0% {
			transform: scale(0.85)
		}
		50% {
			transform: scale(1)
		}
		100% {
			transform: scale(0.85)
		}
	}
	.navbar {
		width: 100%;
		background-color: #FFFFFF;
	}
	.interact {
		.rate {
			color: #999999;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			padding: 20rpx;
		}
		.head {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.ask {
			display: flex;
			margin-bottom: 20rpx;
			animation: .6s dynamic;
			&-box {
				background-color: #FFFFFF;
				width: 462rpx;
				border-radius: 12rpx;
				margin-left: 28rpx;
				padding: 20rpx;
				.title {
					font-size: 28rpx;
					line-height: 40rpx;
					font-weight: 400;
				}
				.list {
					.ask-card {
						border-radius: 4rpx;
						background-color: #EEEEEE;
						font-size: 28rpx;
						height: 60rpx;
						line-height: 60rpx;
						margin-top: 10rpx;
						padding: 0 10rpx;
						&:active {
							opacity: .8;
						}
					}
				}
			}
		}
		.answer {
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			margin-bottom: 12rpx;
			animation: .6s dynamic;
			text {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				margin-right: 28rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: 400;
				padding: 20rpx;
			}
		}
	}
	.scroll-y {
		background-color: #F8F8F8;
	}
	.scroll-content {
		padding: 40rpx 24rpx;
	}
	.advert-pop {
		width: 100vw;
		height: 916rpx;
	
		.advert-img {
			width: 100%;
			height: 100%;
			animation: 1s scaleAnimation infinite;
		}
	}
</style>
